<template>
  <div>
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <h3 class="h3">加密</h3>
            <el-form ref="encryptForm" :model="encryptForm" :rules="encryptRules" label-width="80px">
              <el-form-item label="盐值" prop="salt">
                <el-input v-model="encryptForm.salt"></el-input>
              </el-form-item>
              <el-form-item label="数据值" prop="value">
                <el-input v-model="encryptForm.value"></el-input>
              </el-form-item>
              <el-form-item label="结果" prop="result">
                <el-input type="textarea" v-model="encryptForm.result"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="encrypt">加密</el-button>
                <el-button size="small"  @click="reset('encryptForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <h3 class="h3">解密</h3>
            <el-form ref="decryptForm" :model="decryptForm" :rules="decryptRules" label-width="80px">
              <el-form-item label="盐值" prop="salt">
                <el-input v-model="decryptForm.salt"></el-input>
              </el-form-item>
              <el-form-item label="数据值" prop="value">
                <el-input v-model="decryptForm.value"></el-input>
              </el-form-item>
              <el-form-item label="结果" prop="result">
                <el-input type="textarea" v-model="decryptForm.result"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="decrypt">解密</el-button>
                <el-button size="small"  @click="reset('decryptForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import AES from "@/core/utils/aes.utils";
  export default {
    name: "passwordIndex",
    data() {
      return {
        encryptForm:{
          salt:"Welcome TPF Arch",
          value:"",
          result:""
        },
        encryptRules:{
          salt:[
            {required: true, message: '请输入盐值', trigger: 'blur'}
          ],
          value:[
            {required: true, message: '请输入数据值', trigger: 'blur'}
          ]
        },
        decryptForm:{
          salt:"Welcome TPF Arch",
          value:"",
          result:""
        },
        decryptRules:{
          salt:[
            {required: true, message: '请输入盐值', trigger: 'blur'}
          ],
          value:[
            {required: true, message: '请输入数据值', trigger: 'blur'}
          ]
        },
      }
    },
    created() {

    },
    methods: {
      encrypt(){
        this.$refs.encryptForm.validate((valid) => {
          if(valid) {
            this.encryptForm.result = AES.encode(this.encryptForm.value,this.encryptForm.salt);
          }
        })
      },
      reset(formName){
        this.$refs[formName].resetFields();
      },
      decrypt(){
        this.$refs.decryptForm.validate((valid) => {
          if(valid) {
            this.decryptForm.result = AES.decode(this.decryptForm.value,this.decryptForm.salt);
          }
        })
      },
    }
  }
</script>

<style scoped>
  .h3 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
  }
</style>